<template>
  <div class="dashboard">
    <Map></Map>
  </div>
</template>
<script>
import { getList } from '@/api/dashboard'
import Map from '@/components/MapContainer/MapContainer.vue'
export default {
  name: 'Dashboard',
  components: {
    Map
  },
  data () {
    return {
      list: [], // 获取前端所需菜单
      iconactive: true, // 判断切换显示隐藏导航栏
      isCollapse: true, // 是否水平折叠收起菜单
      squareUrl: // 头像
        'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
    }
  },
  computed: {},
  watch: {},
  mounted () {
    // 获取首页最外侧菜单
    this.getList()
  },
  methods: {
    getList () {
      getList().then((res) => {
        // console.log(res)
        this.list = res
      })
    },
    changeIcon () {
      this.iconactive = !this.iconactive
      this.isCollapse = !this.isCollapse
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>
<style lang='scss' scoped>
.el-header {
  color: #333;
  line-height: 50px;
  height: 50px !important;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 50px;
  height: 100vh !important;
  background-color: rgb(48, 65, 86);
  overflow-x: hidden !important;
  overflow: hidden;
}
.div {
  height: 100%;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.nav {
  height: 50px;
  color: #fff;
}
.nav img {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin-right: 6px;
  display: inline-block;
}
.nav h5 {
  display: inline-block;
  margin: 0;
}
.el-submenu is-opened {
  float: left;
}
.el-submenu {
  text-align: left;
}
.mlist {
  min-width: 205px !important;
  background-color: #1f2d3d !important;
}
.icon {
  font-size: 20px !important;
  height: 50px;
  line-height: 50px;
}
.meun {
  display: inline-block;
  margin-left: 20px;
}
.portrait {
  float: right;
  height: 50px;
  width: 50px;
  display: flex;
}
.portrait ::v-deep div {
  display: flex;
  align-items: center;
}
.dashboard {
  height: 100%;
  width: 100%;
}
</style>
